<style lang="less">
    @import './style.less';
</style>
<template>
    <div class="user">
        <div class="op-header">
            <el-button
                    class="add"
                    size="small"
                    type="info"
                    @click="add">
                <i class="el-icon-circle-plus icon-right" />创建任务
            </el-button>
            <div class="search">
                <el-cascader
                        class="enable-select"
                        :clearable="true"
                        v-model="enableValue"
                        :options="enableOptions"
                        :props="cascaderProps"
                        placeholder="启用状态" />
                <el-input
                        class="search-input"
                        size="small"
                        v-model="searchInput"
                        placeholder="请输入查询关键字"
                        prefix-icon="el-icon-search" />
                <el-button
                        class="search-button"
                        size="small"
                        type="primary"
                        @click="search">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
        <table-ex
                :rows="studyList.content"
                :total="studyList.total"
                :columns="columns"
                :options="options"
                :on-option="onClickOption"
                :on-operation="onClickOperation"
                :on-page-change="onPageChange" />
        <dialog-ex
                v-if="dialogModal"
                :title="this.dialogModal === 'add' ? '新增任务' : '编辑任务'"
                :form="form"
                :mode="dialogModal"
                :init="currentTask"
                :popup-focus="popupFocus"
                :popup-value="businessTemplate" />
        <multistage
                v-if="multistageModal"
                title="选择业务"
                :data="businessTree"
                :default-props="multistageProps"
                :table-columns="multistageColumns"
                :table-rows="businessTemplet"
                :tree-node-click="(row, path) => multistageNodeClick(row, path)"
                :modal-confirm="multistageConfirm"
                :modal-cancel="multistageCancel"
                :initData="relationIds" />
    </div>
</template>

<script>
    import { mapActions, mapGetters, mapMutations } from 'vuex'
    import pageConfig from './config'
    import api from '@/api'

    import tableEx from '@/components/table/tableEx'
    import dialogEx from '@/components/dialog/dialogEx'
    import multistage from '@/components/custom/multistage'

    export default {
        name: 'studyTask',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx,
            'multistage': multistage
        },
        data() {
            return {
                searchInput: '',
                enableValue: [],
                departmentValue: '',
                columns: pageConfig.columns,
                options: pageConfig.options,
                enableOptions: pageConfig.enableOptions,
                cascaderProps: {
                    value: 'id',
                    label: 'name',
                    children: 'subClasses'
                },
                msg_show: false,
                dialogModal: '',
                businessTempletId: [],
                multistageModal: false,
                multistageProps: pageConfig.multistageProps,
                multistageColumns: pageConfig.multistageColumns,
                businessTemplate: '',
                relationIds: [],
                currentTask: {},
                form: {
                    items: pageConfig.addTaskFormItems,
                    actions: {
                        cancel: () => {
                            this.dialogModal = ''
                        },
                        confirm: (data, mode) => {
                            if (mode === 'add') {
                                this.addTask({
                                    data,
                                    cb: (res) => {
                                        this.taskRelation(res)
                                    }
                                })
                            }
                            if (mode === 'edit') {
                                this.taskRelation(this.currentTask)
                                this.editTask(data)
                            }
                            this.dialogModal = ''
                        }
                    }
                }
            }
        },

        computed: {
            ...mapGetters([
                'studyList',
                'businessTree',
                'businessTemplet'
            ])
        },

        created() {
            this.loadInitData();
        },

        mounted() {
        },

        methods: {

            ...mapActions([
                'getstudyClasses',
                'removeonedata',
                'addTask',
                'editTask',
                'getBusinessTreeData',
                'getBusinessList',
                'getTaskDetail',
                'addTaskRelation'
            ]),

            ...mapMutations([
                'setstudyList',
                'QUERYONETASK',
                'SETSTUDYPAGE',
                'SETBUSINESSTREETEMPLET'
            ]),

            loadInitData() {
                this.getstudyClasses()
                this.getBusinessTreeData()
            },

            add() {
                this.currentTask = {}
                this.relationIds = []
                this.businessTempletId = []
                this.businessTemplate = ''
                this.dialogModal = 'add'
            },


            taskRelation(objc) {
                if (this.relationIds && objc && objc.id) {
                    let params = {
                        id: objc.id,
                        action: 'replace',
                        lIds: this.relationIds
                    }
                    this.addTaskRelation(params)
                }
            },

            search() {
                const filter = {
                    name: this.searchInput,
                    enabled: !!this.enableValue ? this.enableValue[0] : null
                }
                this.SETSTUDYPAGE({
                    number: 1,
                    pages: 0,
                    filter
                })
                this.getstudyClasses()
            },

            multistageConfirm(results) {
                this.multistageModal = false
                if (results) {
                    this.relationIds = results
                    this.businessTemplate = this.businessTemplate =
                        this.relationIds && this.relationIds.length > 0
                            ? `已选${this.relationIds.length}个业务模块` : ''
                }
            },

            multistageCancel(e) {
                this.multistageModal = false
            },

            popupFocus(e) {
                this.SETBUSINESSTREETEMPLET({
                    businessTemplet: []
                })
                this.multistageModal = true
            },

            batchOption() {
            },

            multistageNodeClick(row, nodePath) {
                let params = {
                    filter: {
                        classIds: nodePath,
                        enabled: true,
                        name: null
                    },
                    size: 0,
                    number: 0,
                    total: 0,
                    pages: 0
                }
                this.getBusinessList(params)
            },

            onClickOption(option, rows) {
                const prop = option;
                switch (prop) {
                    case 'batchdelete': {
                        if (rows.length) {
                            let id = rows.map(item => {
                                return item.id
                            })
                            this.removeonedata(
                                id
                            )
                        }
                        break
                    }
                    case 'batchrefresh': {
                        this.loadInitData()
                        break
                    }
                    default: {
                    }
                }
            },

            onClickOperation(oper, row) {
                let optstyle = oper.prop;
                let id = row.id
                const prop = oper.prop
                switch (prop) {
                    case 'delete': {
                        this.removeonedata(
                            [id]
                        )
                        break
                    }
                    case 'edit': {
                        let data = {
                            id: row.id
                        }
                        api.getTaskDetail(data, {
                            success: (res) => {
                                this.businessTemplate = ''
                                if (res.businessTemplates && res.businessTemplates.length) {
                                    let businessNames = res.businessTemplates.map(item => {
                                        return item.name
                                    })
                                    this.relationIds = res.businessTemplates.map(item => {
                                        return item.id
                                    })
                                    this.businessTemplate = this.relationIds && this.relationIds.length > 0
                                        ? `已选${this.relationIds.length}个业务模块` : ''
                                }
                                this.currentTask = res
                                this.dialogModal = 'edit'
                            }
                        })
                        break
                    }
                    default: {
                    }
                }
            },

            onPageChange(number) {
                this.SETSTUDYPAGE({ number })
                this.getstudyClasses()
            }
        }
    }
</script>
